<template>
    <view class="wo-page">
        <view class="wo-screen">
            <u-image width="100%" mode="widthFix" src="http://static.0830ch.com/default/20210513/a30ad275e0b12cce5011bc8df6f8bcc9.jpg"></u-image>
        </view>
        <view class="wo-page-body u-padding-left-20 u-padding-right-20">
            <!--个人信息-->
            <view class="wo-user u-padding-20 u-margin-bottom-20">
                <!--用户头像-->
                <u-avatar class="wo-user-avatar" :src="wxUserDetail.avatar || ''" :show-sex="wxUserDetail.gender ? true : false" :sex-icon="wxUserDetail.gender == 2 ? 'woman' : 'man'" :sex-bg-color="wxUserDetail.gender == 2 ? 'woman-primary' : 'man-primary'" size="100"></u-avatar>
                <!--用户信息-->
                <view class="wo-user-info u-padding-left-20">
                    <view class="wo-user-name">
                        <text>{{ wxUserDetail.name || '暂未登陆' }}</text>
                    </view>
                    <view class="wo-user-time">
                        <text v-if="wxUserDetail.create_time">{{ $dayjs.unix(wxUserDetail.create_time).format('YYYY/MM/DD HH:mm') }}</text>
                    </view>
                </view>
                <!--操作区域-->
                <view class="wo-user-action">
                    <view class="u-margin-right-10" v-if="isManage">
                        <u-button type="primary" size="mini" shape="circle" @click="$u.route('pages/manage/detail')">管理入口</u-button>
                    </view>
                    <view class="">
                        <u-button type="info" size="mini" shape="circle" @click="$u.route('pages/hospital/index')">接种点</u-button>
                    </view>
                </view>
            </view>
            <!--操作菜单-->
            <view class="wo-action u-margin-bottom-20">
                <u-button type="primary" shape="circle" v-if="!vuex_wx_token" @click="loginFunc">授权登陆</u-button>
                <view class="u-flex" v-else>
                    <view class="u-flex-6 u-padding-right-10">
                        <u-button type="primary" shape="circle" @click="$u.route('pages/unit/index')">单位登记</u-button>
                    </view>
                    <view class="u-flex-6">
                        <u-button type="success" shape="circle" @click="$u.route('pages/person/index')">个人登记</u-button>
                    </view>
                </view>
                <!--
				<view class="u-padding-top-20">
                    <u-button type="warning" shape="circle" @click="scanShow = true">扫码接种</u-button>
                </view>
				-->
				<view class="u-padding-top-20">
				    <u-button type="warning" shape="circle" @click="$u.route('pages/product/index')">预约接种</u-button>
				</view>
            </view>
            <!--系统说明-->
            <view class="wo-panel u-padding-20">
                <view class="wo-panel-head u-margin-bottom-20">
                    <view class="wo-panel-title u-text-center"><text>新冠疫苗预约接种须知</text></view>
                </view>
                <view class="wo-panel-body">
                    <view class="wo-article-content"><u-parse :html="appDetail.content"></u-parse></view>
                </view>
            </view>
        </view>
        <u-modal v-model="officialSubscribeShow" :content="officialSubscribeExcerpt" confirm-text="查看详情" @confirm="officialSubscribeFunc">
            <view class="wo-official-subscribe u-text-center u-padding-20">
                <view class="u-flex u-row-center u-padding-10">
                    <u-image width="240" height="240" src="https://wx.jlqfybjy.xyz/upload/luck/20200923/cf98b03421568942226044e501e2720b.jpg"></u-image>
                </view>
                <view class="u-tips-color">
                    <text>{{officialSubscribeExcerpt}}</text>
                </view>
            </view>
        </u-modal>
        <u-modal v-model="scanShow" :content="scanExcerpt" :show-cancel-button="true" cancel-text="取消扫码" confirm-text="立即扫码" @confirm="scanFunc"></u-modal>
        <!--接种人选择-->
        <u-popup mode="center" width="80%" :mask-close-able="false" border-radius="10" :closeable="true" v-model="personSelectShow">
            <view class="wo-panel-popup">
                <view class="wo-panel-head u-text-center">
                    <text>接种人选择</text>
                </view>
                <view class="wo-panel-body">
                    <scroll-view scroll-y="true">
                        <view class="wo-list u-padding-10" v-if="personSelectList.total">
                            <view class="wo-item u-padding-10" v-for="(data_v, data_k) in personSelectList.items" :key="data_k">
                                <view class="wo-data u-padding-20">
                                    <view class="wo-data-info">
                                        <view class="wo-data-name">
                                            <text>{{ data_v.name }}</text>
                                        </view>
                                        <view class="">
                                            <text>证件号：{{ data_v.id_number }}</text>
                                        </view>
                                    </view>
                                    <view class="wo-data-action">
                                        <u-button type="primary" size="mini" shape="circle">选择</u-button>
                                    </view>
                                </view>
                            </view>
                            <u-loadmore :status="personSelectListStatus" @loadmore="personSelectListMoreFunc"></u-loadmore>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isManage: false,
            officialSubscribeShow: false,
            officialSubscribeExcerpt: '为保障信息安全，请识别上方二维码通过“天府发布”公众号进行信息填报',
            // 应用详情
            appDetail: {},
            // 用户详情
            wxUserDetail: {},
            scanShow: false,
            scanExcerpt: '请在接种完成后扫码，系统将提示您下次接种时间，如未登记信息会自动跳转信息登记界面，完成后再扫码！',
            hospitalDetail: {},
            personSelectShow: false,
            personSelectList: {},
            personSelectListStatus: 'loadmore',
        };
    },
    methods: {
        async initPageFunc(option) {
            // 获取用户信息
            if (this.vuex_wx_token) {
                let wxUserDetail = await this.$u.api.wxUserDetail();
                if (wxUserDetail) {
                    this.wxUserDetail = wxUserDetail;
                    if (this.wxUserDetail.subscribe_status != 1) {
                        // this.officialSubscribeShow = true;
                    }
                }
                // 判断是否为管理
                let manageDetail = await this.$u.api.manageDetail();
                if (manageDetail) {
                    this.isManage = true;
                }
            }
            this.appDetail = this.vuex_app_info;
            this.pageInit = true;
        },
        loginFunc() {
            // #ifdef H5
            if (this.clientType == 'wechat_mobile' || this.clientType == 'wechat_computer') {
                let loginInfo = this.$wx.loginFunc(this.$config.wx_id, this.$config.wx_login_link, this.$config.wx_login_scope, this.$config.wx_success_redirect, this.$config.wx_error_redirect);
                if (!loginInfo) {
                    return false;
                }
                this.$u.vuex('vuex_wx_id', loginInfo.id);
                this.$u.vuex('vuex_wx_token', loginInfo.token);
                return true;
            }
            // #endif
        },
        scanFunc() {
            let that = this;
            that.$wx.sdk.scanQRCode({
                needResult: 1,
                scanType: ['qrCode'],
                success(result) {
                    if (result.errMsg == 'scanQRCode:ok' && result.resultStr) {
                        let id = result.resultStr.match(/hospital\/detail\?id[\/|=](\d)($|[^\w])/);
                        if (id && id[1]) {
                            id = id[1];
                            that.hospitalSelectFunc(id);
                            return true;
                        }
                    }
                    that.$u.toast('扫码失败');
                }
            });
        },
        async hospitalSelectFunc(id) {
            if (!id) {
                this.$u.toast('参数错误');
                return false;
            }
            let hospitalDetail = await this.$u.api.hospitalDetail({
                id: id
            });
            if (!hospitalDetail) {
                this.$u.toast('不存在当前接种点');
                return false;
            }
            this.hospitalDetail = hospitalDetail;
            this.hospitalRecordCreateFunc();
        },
        async hospitalRecordCreateFunc(person) {
            person = person || 0;
            if (!this.hospitalDetail.id) {
                this.$u.toast('操作失败');
                return false;
            }
            if (!person) {
                let personSelectList = await this.personSelectListFunc();
                if (!personSelectList || !personSelectList.total) {
                    this.$u.toast('请先登记信息');
                    return false;
                }
                if (!person && personSelectList.total != 1) {
                    // 弹出信息选择
                    this.personSelectShow = true;
                    return false;
                }
                person = personSelectList.items[0].id;
            }
            // 添加记录
            let result = await this.$u.api.hospitalRecordCreate({
                hospital: this.hospitalDetail.id,
                person: person
            });
            if (!result) {
                return false;
            }
            this.$u.toast('操作成功');
        },
        async personSelectListFunc(params) {
            params = params || {};
            this.personSelectListStatus = 'loading';
            let personSelectList = await this.$u.api.planPersonList(params);
            if (!personSelectList) {
                return false;
            }
            this.personSelectListStatus = 'loadmore';
            return personSelectList;
        },
        async personSelectListMoreFunc() {
            if (this.personSelectList.items.length >= this.personSelectList.total) {
                this.personSelectListStatus = 'nomore';
                return false;
            }
            let result = await this.personSelectListFunc({
                page: ++this.personSelectList.page_current
            });
            if (result) {
                this.personSelectList.items = this.personSelectList.items.concat(result.items);
            }
        },
        officialSubscribeFunc() {
            window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3MDEzNjg0Mw==&scene=124#wechat_redirect';
        },
        
    }
};
</script>

<style lang="scss">
.wo-screen {
    line-height: 0;
}
.wo-user {
    display: flex;
    background-color: #fff;
    border-radius: uni-unit(10px);
    &::after {
        border-radius: uni-unit(10px);
    }
    .wo-user-info {
        flex: 1;
        height: uni-unit(20px);
        line-height: uni-unit(20px);
        font-size: uni-unit(12px);
        color: $uni-text-color-grey;
        .wo-user-name {
            height: uni-unit(30px);
            line-height: uni-unit(30px);
            font-size: uni-unit(16px);
            color: $uni-text-color;
        }
        .wo-user-time {
            
        }
    }
    .wo-user-action {
        display: flex;
        align-items: center;
    }
}
.wo-panel {
    background-color: #fff;
    border-radius: uni-unit(10px);
    &::after {
        border-radius: uni-unit(10px);
    }
    .wo-panel-title {
        height: uni-unit(30px);
        line-height: uni-unit(30px);
        font-size: uni-unit(16px);
    }
}
</style>
